<template>
      <div>
            <el-col :span="24" v-loading="isLoading" element-loading-background="rgba(233,240,240,1)" element-loading-text="加载中">
                  <el-col :span="24" class="user-top">
                        <el-col :span="12">
                              <div class="userEcharts" ref="userEcharts"></div>
                        </el-col>
                        <el-col :span="12"></el-col>
                  </el-col>
                  <el-col :span="24" class="user-body">
                        <el-table :data="dataList" style="width: 100%">
                              <el-table-column type="index" width="50"></el-table-column>
                              <el-table-column type="selection" width="100"></el-table-column>
                              <el-table-column prop="ip" label="IP" width="400"></el-table-column>
                              <el-table-column prop="url" label="接口地址" width="400"></el-table-column>
                              <el-table-column prop="time" label="时间" width="400"></el-table-column>
                              <el-table-column label="操作"></el-table-column>
                        </el-table>
                  </el-col>
                  <el-col :span="24" class="user-bottom">
                        <el-pagination background layout="prev, pager, next" :total="userList.length" @current-change="changePage"></el-pagination>
                  </el-col>
                  
            </el-col>
      </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
      name:'User',
      props: [],
      data() {
            return {
                  isLoading:true,
                  userList:[],// 表格所有数据
                  dataList:[],// 当前页码的表格数据
                  ipDataList:[],// 每个IP的访问次数
            }
      },
      methods: {
            echartsInit(x,y){
                  var myChart =echarts.init(this.$refs.userEcharts);
                  myChart.setOption({
                        title: {
                              text: '近七日访问的IP数',
                              textStyle: {
                                    fontSize: 30,
                                    fontStyle: "italic",
                                    fontFamily: "Courier New",
                                    textShadowColor: "rgba(117, 200, 9, 1)",
                                    textShadowBlur: 3,
                                    textShadowOffsetX: 3.5,
                                    textShadowOffsetY: 3.5
                              },
                        },
                        tooltip: {
                              backgroundColor:'rgba(50,50,50,0.7)',
                              textStyle:{
                                    color:'#fff',
                                    fontSize:'12',
                                    lineHeight:70
                              },
                              trigger: 'axis',
                              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                              },
                              formatter:this.showFormat
                        },
                        xAxis: {
                              data: x
                        },
                        yAxis: {},
                        series: [{
                              name: '当日IP数',
                              type: 'bar',
                              data: y,
                              color:'#00B542'
                        }]
                  });
            },
            init(){
                  this.$axios.get(this.$url+'/api/blog/userInfo').then(
                        response =>{
                              if(response.data.status.code==200){
                                    
                                    response.data.data.infoList.forEach((item) => {
                                          var time =  new Date(item.time);
                                          item.time= time.toLocaleDateString()+' '+time.getHours()+'时'+time.getMinutes()+'分'+time.getSeconds()+'秒';
                                    })
                                    this.userList=response.data.data.infoList
                                    this.ipDataList=response.data.data.ipData
                                    this.isLoading=false;
                              }else{
                                    this.isLoading=false;
                                    this.$message({
                                          type:'info',
                                          message:'获取数据可能出现异常'
                                    })
                              }
                              
                              this.echartsInit(response.data.data.dateList,response.data.data.ipSumList);
                              this.changePage(1);
                        }
                  )
            },
            /**翻页 */
            changePage(page){
                  this.dataList=this.userList.slice(page*10-10,page*10)
            },
            showFormat(e){
                  let index=e[0].dataIndex
                  let result='';
                  this.ipDataList[index].forEach(item => {
                        result=result+item.ip+"访问"+item.sum+"次<br/>"
                  });
                  if(result==''){
                        return '无访问记录';
                  }
                  return result;
            }
      },
      mounted(){
            this.init();
      }
      
};
</script>

<style lang="less" scope>
      .user-top{
            height: 25vh;
            background-color: #fff;
            .userEcharts{
                  width: 100%;
                  height: 25vh;
            }
      }
      .user-body{
            height: 55vh;
      }
      .user-bottom{
            padding-top: 10px;
            height: 5vh;
      }


</style>